<template>
  <div class="layout">
    <div class="drawer" :style="drawerStyle"><slot name="drawer"></slot></div>
    <div class="content" :style="contentStyle"><slot></slot></div>
  </div>
</template>
<script>
export default {
  name: "Layout",
  data() {
    return {
      drawer: 240
    };
  },
  computed: {
    drawerStyle() {
      return {
        width: this.drawer + "px"
      };
    },
    contentStyle() {
      return {
        marginLeft: this.drawer + "px"
      };
    }
  }
};
</script>
<style lang="less">
.layout {
  width: 100%;
  height: 100%;
  user-select: none;
  .drawer {
    height: 100%;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1;
  }
  .content {
    height: 100%;
    overflow: auto;
  }
}
</style>
